<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<title>Book详细列表页面</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/demo/demo.css">
    
    <script type="text/javascript" src="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/jquery.min.js"></script>
	<script type="text/javascript" src="<%=this.getServletContext().getContextPath()%>/jsfiles/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
    
    <style type="text/css">

	<style type="text/css">
        html,body
        {
            height:100%;
            margin:0;
        }
	</style>
	<script type="text/javascript">
				/** 
		 * JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。 
		 */  
		$.fn.extend({  
		    /** 
		     * 修改DataGrid对象的默认大小，以适应页面宽度。 
		     *  
		     * @param heightMargin 
		     *            高度对页内边距的距离。 
		     * @param widthMargin 
		     *            宽度对页内边距的距离。 
		     * @param minHeight 
		     *            最小高度。 
		     * @param minWidth 
		     *            最小宽度。 
		     *  
		     */  
		    resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {  
		        var height = $(document.body).height() - heightMargin;  
		        var width = $(document.body).width() - widthMargin;  
		  
		        height = height < minHeight ? minHeight : height;  
		        width = width < minWidth ? minWidth : width;  
		  
		        $(this).datagrid('resize', {  
		            height : height,  
		            width : width  
		        });  
		    }  
		});  
		
		$(function() { 
		    //datagrid数据表格ID 
		     var datagridId = 'dg';  
		  
		    // 第一次加载时自动变化大小  
		    $('#' + datagridId).resizeDataGrid(0, 0, 600, 800);  
		  
		    // 当窗口大小发生变化时，调整DataGrid的大小  
		    $(window).resize(function() {  
		        $('#' + datagridId).resizeDataGrid(0, 0, 600, 800);  
		    });
		    
		    
		    
		    //********************************************
			$('#dg').datagrid({   
			    url:'<%=this.getServletContext().getContextPath()%>/DeviceManage/DeviceManageLoadList',   
			    pagination:true,   
			    pageSize:3,   
			    pageNumber:1,   
			    rownumbers:true,
			    fitColumns:true,
	            toolbar:'#toolbar',            
	            loadMsg:"正在加载数据",
	            singleSelect:false,
	            frozenColumns:[[  
            		{field:'ck',checkbox:true}  
        		]],
	            
	            onBeforeLoad: function (param) {
	            	//alert("param"+param);
			    },
			    onLoadSuccess: function (data) {
			    	//alert("data"+data);			        
			    },
			    onLoadError: function () {
			        alert("error");
			    },
			    onClickCell: function (rowIndex, field, value) {
			        
			    }
			});
			
			 //设置分页控件  
		    var p = $('#dg').datagrid('getPager');  
		    $(p).pagination({  
		        pageSize: 6,//每页显示的记录条数，默认为10  
		        pageList: [5,10,15,30,50,100],//可以设置每页记录条数的列表  
		        beforePageText: '第',//页数文本框前显示的汉字  
		        afterPageText: '页    共 {pages} 页',  
		        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
		        /*onBeforeRefresh:function(){ 
		            $(this).pagination('loading'); 
		            alert('before refresh'); 
		            $(this).pagination('loaded'); 
		        }*/ 
		    });  
			
		    /*$('#dg').datagrid('loadData',function(){
		    	alert("loaddata");
		    });  */
		    
		    //********************************************
		    
		    
		    
		     
		});
	</script>
	
</head>
<body style="border:none;visibility:visible;">  
    <table id="dg" class="easyui-datagrid">
        <thead>
            <tr>
                <!--th field="serialno" width="50">SerialNo</th-->
                <th field="guid" width="50">惟一标识码</th>
                <th field="name" width="50">设备名</th>
                <th field="type" width="50">设备类型</th>
                <th field="ownnode" width="50">隶属地区</th>
                <th field="ip" width="50">IP</th>
                <th field="port" width="50">端口号</th>
                <th field="linktype" width="50">连接类型</th>
                <th field="jointime" width="50">添加时间</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建帐号</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑帐号</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">移除帐号</a>
    </div>
    
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">帐号信息</div>
        <form id="fm">            
            <div class="fitem">
                <label>UserName:</label>
                <input id="username" name="user.username" class="easyui-validatebox" required="false">
            </div>
            <div class="fitem">
                <label>ShowName:</label>
                <input id="showname" name="user.showname">
            </div>
            <div class="fitem">
                <label>PassWord:</label>
                <input id="password" name="user.password">
            </div>
             <div class="fitem">
                <label>OwnGroup:</label>              
                <input id="owngroup" name="user.owngroup">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
    <script type="text/javascript">
		
        var url;
        function newUser(){
            $('#dlg').dialog('open').dialog('setTitle','创建帐号');
            $('#fm').form('clear');
            url = 'save_user.php';            
        }
        function editUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','编辑帐号');
                $('#fm').form('load',row);
                url = 'update_user.php?id='+row.id;
            }
        }
        function saveUser(){
        	/*
            $('#fm').form('submit',{ 
                url: 'url',
                onSubmit: function(){
                    return $(this).form('validate');                    
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                    }
                }
            });
            */
            alert("saveuser");                  	 
	        var params = $("#fm").serialize();          
	        alert( "params:" +params );     
	        $.ajax({       
	            url:'<%=this.getServletContext().getContextPath()%>/UserManage/UserManage!newUser',  
	            type:'post',  
	            data:params,  
	            dataType:'json',
	            success:function (data) {
	                /*$.each(data.userList, function(i, value){ 
	                 $("#allUser").append("<div>输出了：id:"+value.id+", name: "+value.name+"</div>"); 
	                 });*/
	                 alert("success");
	                var resp = data.errortip;
	                if ( resp == "新建成功" ){
	                	alert("新建成功" + data.errortip);	           	          
	                	top.location.href='<%=this.getServletContext().getContextPath()%>/index.jsp' ;
	                }                       	
	            	else{
	            		alert("新建失败" + data.errortip);	            		
	                }                
	            },
	            complete:function( XMLHttpRequest, textStatus ){
	            	alert("complete!"+ this.url);            	
	            	//alert( this.url );
	            },
	            error:function( XMLHttpRequest, textStatus, errorThrown){
	            	alert( "error:"+ errorThrown );
	            }    
	        });    
        }
        function destroyUser(){        	
        	var row = $('#dg').datagrid('getSelected');
        	var question = '你确定要删除设备[' + row.name + ']吗?';
            if (row){
                $.messager.confirm('Confirm',question,function(r){
                    if (r){
                        $.post('<%=this.getServletContext().getContextPath()%>/DeviceManage/DeviceManageDelete!deleteDevice',{guid:row.guid},function(result){
                            if (result.success){
                                $('#dlg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        },'json');
                    }
                });
            }	            
        }
      
    </script>
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
    </style>
</body>
</html>